<template>
  <section class="project-brief">
    <div class="item">
      <i class="icon el-icon-office-building" style="background: #e0eefd; color: #74a8f8" />
      <div>
        <div class="label">项目推进情况</div>
        <div style="zoom: 0.9" v-if="info.fid">
          <el-checkbox :value="!info.isLockout" style="margin-right: 10px">正常</el-checkbox>
          <el-checkbox :value="!!info.isLockout">
            <span :class="{ red: !!info.isLockout }">停工</span>
          </el-checkbox>
        </div>
        <span v-else>暂无数据</span>
      </div>
    </div>
    <div class="item">
      <i class="icon el-icon-user-solid" style="background: #e1f2fc; color: #6bc5e8" />
      <div>
        <div class="label">项目总</div>
        {{ info.xmzName || '无' }}
      </div>
    </div>
    <div class="item">
      <i class="icon el-icon-s-custom" style="background: #e6eafd; color: #7882ed" />
      <div>
        <div class="label">项目工程负责人</div>
        {{ info.principalNames || '无' }}
      </div>
    </div>
    <div class="item" v-if="info.isLockout">
      <i class="icon el-icon-date" style="background: #f1ecf4; color: #e75b6d" />
      <div>
        <div class="label">已停工天数</div>
        <div v-if="info.lockoutDays">
          <span class="num" style="color: #e75b6d">{{ info.lockoutDays }}</span>
          天
        </div>
        <div v-else>无</div>
      </div>
    </div>
    <div class="item" v-if="info.isLockout">
      <i class="icon el-icon-document" style="background: #f4e9e5; color: #ef8e47" />
      <div>
        <div class="label">停工原因</div>
        {{ info.lockoutReason || '无' }}
      </div>
    </div>
  </section>
</template>
<script>
// 项目信息简述
import { getProjectListProById } from '@/api/qualityManage/cq'
const oneDay = 1000 * 60 * 60 * 24
export default {
  name: 'ProjectBrief',
  props: { projectId: { type: String, default: '' } },
  data() {
    return { info: {} }
  },
  methods: {
    reset() {
      this.info = {}
    },
    async getInfo() {
      const res = await getProjectListProById({ projectId: this.projectId }).catch(() => false)
      if (res === false) return (this.info = {})

      const data = res.data || {}
      if (data.isLockout && data.lockoutDate) {
        data.lockoutDays = Math.ceil((new Date() - new Date(data.lockoutDate)) / oneDay)
      }

      this.info = data
    }
  }
}
</script>
<style lang="scss" scoped>
.project-brief {
  background-image: linear-gradient(to right, white, transparent);
  padding: 0 0 20px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  color: #37383a;
  .item {
    display: flex;
    align-items: center;
    padding: 20px 40px 0 0;
  }
  .icon {
    padding: 6px;
    border-radius: 6px;
    margin-right: 10px;
    font-size: 24px;
  }
  .label {
    color: rgba(black, 0.4);
    margin-bottom: 4px;
  }
  .red {
    color: #e56662;
    font-weight: bold;
  }
  .num {
    font-size: 18px;
    line-height: 12px;
    font-weight: bold;
  }
}
</style>
